import React,{Component} from 'react';
import { Card,Icon } from 'antd';
require ('antd/dist/antd.css');
require ('./Cardd.css');

class Cardd extends Component{
    constructor(props){
        super(props);
        this.state={

        }
    };
    componentDidMount(){

    }
    render(){
        return(
        <div className="bigs">
            <div className="bodys">
                 <Card
                    title="百度"
                    extra={<a href="#">更多</a>}
                    style={{ width: 300 ,marginLeft:'30px'}}
                    className="little"
                >
                    <Icon type="question-circle" theme="twoTone" />&nbsp;&nbsp;&nbsp;
                    <span><a href="https://www.baidu.com" target="_blank" rel="noopener noreferrer">百度一下</a></span>
                </Card>
                <Card
                    title="谷歌"
                    extra={<a href="#">更多</a>}
                    style={{ width: 300 ,marginLeft:'30px'}}
                    className="little"
                >
                    <Icon type="chrome" /> &nbsp;&nbsp;&nbsp;
                    <span><a href="http://www.google.cn" target="_blank" rel="noopener noreferrer">谷歌浏览器</a></span>
                </Card>
                <Card
                    title="antd design"
                    extra={<a href="#">更多</a>}
                    style={{ width: 300,marginLeft:'30px' }}
                    className="little"
                >
                    <Icon type="ant-design" /> &nbsp;&nbsp;&nbsp;
                    <span><a href="https://ant.design/index-cn" target="_blank" rel="noopener noreferrer">Antd Design</a></span>
                </Card>
                <Card
                    title="GitHub"
                    extra={<a href="#">更多</a>}
                    style={{ width: 300 , marginLeft:'30px'}}
                    className="little"
                >
                    <Icon type="github" /> &nbsp;&nbsp;&nbsp;
                    <span><a href="https://www.github.com" target="_blank" rel="noopener noreferrer">github</a></span>
                </Card>
            </div>
            <div className="bodys">
                <Card
                    title="GitLab"
                    extra={<a href="#">更多</a>}
                    style={{ width: 300 ,marginLeft:'30px'}}
                    className="little"
                >
                    <Icon type="gitlab" /> &nbsp;&nbsp;&nbsp;
                    <span><a href="https://about.gitlab.com/" target="_blank" rel="noopener noreferrer">GitLab</a></span>
                </Card>
                <Card
                    title="阿里云"
                    extra={<a href="#">更多</a>}
                    style={{ width: 300 ,marginLeft:'30px'}}
                    className="little"
                >
                    <Icon type="aliyun" /> &nbsp;&nbsp;&nbsp;
                    <span><a href="https://www.aliyun.com" target="_blank" rel="noopener noreferrer">上云就上阿里云</a></span>
                </Card>
                <Card
                    title="淘宝"
                    extra={<a href="#">更多</a>}
                    className="little"
                    style={{ width: 300,marginLeft:'30px' }}
                >
                    <Icon type="taobao-circle" /> &nbsp;&nbsp;&nbsp;
                    <span><a href="https://www.taobao.com" target="_blank" rel="noopener noreferrer">淘 ! 我喜欢</a></span>
                </Card>
                <Card
                    title="Twitter"
                    extra={<a href="#">更多</a>}
                    className="little"
                    style={{ width: 300 , marginLeft:'30px'}}
                >
                    <Icon type="twitter" /> &nbsp;&nbsp;&nbsp;
                    <span><a href="https://mashable.com/category/twitter" target="_blank" rel="noopener noreferrer">Twitter</a></span>
                </Card>
            </div>
            <div className="bodys">
                <Card
                    title="知乎"
                    extra={<a href="#">更多</a>}
                    className="little"
                    style={{ width: 300 ,marginLeft:'30px'}}
                    
                >
                    <Icon type="zhihu"/> &nbsp;&nbsp;&nbsp;
                    <span><a href="https://www.zhihu.com" target="_blank" rel="noopener noreferrer">有问题 , 上知乎 !</a></span>
                </Card>
                <Card
                    title="微博"
                    extra={<a href="#">更多</a>}
                    className="little"
                    style={{ width: 300 ,marginLeft:'30px'}}
                >
                    <Icon type="weibo" /> &nbsp;&nbsp;&nbsp;
                    <span><a href="https://www.weibo.com" target="_blank" rel="noopener noreferrer">微博 , 随时随地发现新鲜事</a></span>
                </Card>
                <Card
                    title="语雀"
                    className="little"
                    extra={<a href="#">更多</a>}
                    style={{ width: 300,marginLeft:'30px' }}
                >
                    <Icon type="yuque" theme="filled" /> &nbsp;&nbsp;&nbsp;
                    <span><a href="https://www.yuque.com" target="_blank" rel="noopener noreferrer">写文档 , 就用语雀</a></span>
                </Card>
                <Card
                    title="钉钉"
                    className="little"
                    extra={<a href="#">更多</a>}
                    style={{ width: 300 , marginLeft:'30px'}}
                >
                    <Icon type="dingding" /> &nbsp;&nbsp;&nbsp;
                    <span><a href="https://www.dingtalk.com" target="_blank" rel="noopener noreferrer">阿里巴巴钉钉官网</a></span>
                </Card>
            </div>
            </div>
            
        )
    } 
}
export default Cardd;